<template>
  <div>
    <h2>订单管理</h2>
    <div class="search-box">
      <el-input
        type="text"
        style="width: 300px"
        v-model="searchOrderId"
        placeholder="请输入订单编号"
      />
    </div>
    <el-table
      class="order-table"
      :data="displayOrderList"
      style="width: 100%; height: calc(100vh - 260px)"
    >
      <el-table-column prop="id" label="订单编号" width="200" />
      <el-table-column prop="name" label="用户名称" width="200" />
      <el-table-column prop="totalPrice" label="订单总价" width="200" />
      <el-table-column prop="orderTime" label="下单时间" width="200" />
      <el-table-column prop="status" label="订单状态" width="200" />
      <el-table-column class="operation" fixed="right" label="操作" width="300">
        <template #default="item">
          <div class="operation">
            <SingleButton text="查看详情" @click="viewDetail(item.row.id)" />
            <SingleButton text="删除" @click="deleteOrder(item.row.id)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      v-model="drawer"
      direction="rtl"
      size="100%"
      style="max-width: 600px"
      :show-close="false"
    >
      <template #header>
        <h4>订单详情</h4>
      </template>
      <template #default>
        <br /><br />
        <el-form style="max-width: 600px" :model="orderDetail" label-width="auto">
          <el-form-item label="订单编号">
            <span>{{ orderDetail.id }}</span>
          </el-form-item>
          <el-form-item label="用户名称">
            <span>{{ orderDetail.name }}</span>
          </el-form-item>
          <el-form-item label="订单总价">
            <span>{{ orderDetail.totalPrice }}</span>
          </el-form-item>
          <el-form-item label="下单时间">
            <span>{{ orderDetail.orderTime }}</span>
          </el-form-item>
          <el-form-item label="订单状态">
            <span>{{ orderDetail.status }}</span>
          </el-form-item>
          <el-form-item label="收货地址">
            <span>{{ orderDetail.address }}</span>
          </el-form-item>
          <el-form-item label="商品列表">
            <el-table :data="orderDetail.goodsList1">
              <el-table-column prop="name" label="商品名称" />
              <el-table-column prop="price" label="商品价格" />
              <el-table-column prop="quantity" label="商品数量" />
            </el-table>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <div class="operation">
            <SingleButton style="margin-left: auto" text="关闭" @click="closeDrawer" />
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ElTable, ElTableColumn, ElDrawer, ElForm, ElFormItem, ElInput } from 'element-plus'
import SingleButton from '@/components/SingleButton.vue'
import { ref, computed } from 'vue'
import { useOrderStore } from '@/stores'
import showPrompt from '@/utils/showPrompt'
// import { orderList as mockOrderList } from '@/mock/orders'

const orderStore = useOrderStore()
const orderList = ref(orderStore.orderList)
const drawer = ref(false)
const orderDetail = ref({})

const searchOrderId = ref('') // 用于存储输入的订单编号

// 计算属性，根据搜索关键词筛选订单列表
const displayOrderList = computed(() => {
  if (!searchOrderId.value) {
    return orderList.value
  }
  return orderList.value.filter(order => String(order.id).includes(searchOrderId.value))
})

function findOrderFromId(id) {
  const result = orderList.value.find(item => item.id === id)
  return result
}

const viewDetail = id => {
  drawer.value = true
  if (id) {
    const result = findOrderFromId(id)
    orderDetail.value = result
  }
}

const deleteOrder = id => {
  orderStore.delOrderList(id)
  showPrompt('删除成功', 'success')
  orderList.value = orderStore.orderList
}

const closeDrawer = () => {
  drawer.value = false
}
</script>

<style scoped>
h2 {
  margin-bottom: 40px;
}

.operation {
  display: flex;
  gap: 10px;
}

.search-box {
  margin-bottom: 20px;
}

.search-box input {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-box button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-box button:hover {
  background-color: #0056b3;
}
</style>
